<template>
<div>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <h4>热门文章</h4>
      
    </div>
    <div v-for="(item,index) in hotArticles" :key="item.id" class="text item">
      {{(index+1)+"、"+ item.title   }}
    </div>
  </el-card>
</div>
</template>

<script> 
import {hotArticle} from '@/api/article'
export default {
    data() {
      return {
        hotArticles: [],
      };
    },
    created(){
      hotArticle().then(res=>{
        this.hotArticles=res.data
      })
      
    }

}
</script>

<style scoped>
.box-card{
  margin-top: 15px;
}
.clearfix{
  height: 30px;
  line-height: 20px;
}

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  /* .box-card {
    width: 300px;
  } */
</style>